<template>
  <div class="number-input">
    <div
      class="reduce-icon"
      :class="{ disabled: currentValue <= min }"
      @click="reduce"
    >
      -
    </div>
    <input
      class="input"
      type="number"
      :min="min"
      :max="max"
      :value="currentValue"
      @click="showNumberPanel"
      @input="changeVal"
      @change="changeVal"
      @keydown="inputLimit"
      @blur="blur"
    />
    <div
      class="plus-icon"
      :class="{ disabled: currentValue >= max }"
      @click="plus"
    >
      +
    </div>
  </div>
</template>

<script>
export default {
  name: 'NumberInput',
  props: {
    max: {
      type: Number,
      default: Number.MAX_VALUE
    },
    min: {
      type: Number,
      default: Number.MIN_VALUE
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    currentValue(val) {
      this.changeVal(val)
    },
    value(val) {
      this.currentValue = val
    }
  },
  methods: {
    plus() {
      if ((this.max !== undefined && this.currentValue < this.max) || this.max === undefined) {
        this.currentValue++
      }
    },
    reduce() {
      if ((this.min !== undefined && this.currentValue > this.min) || this.min === undefined) {
        this.currentValue--
      }
    },
    inputLimit(e) {
      const key = e.key
      if (key === 'e') {
        e.returnValue = false
        return false
      }
      return true
    },
    blur(event) {
      if (event.target.value === '') {
        event.target.value = this.currentValue - 0
      } else if (event.target.value > this.max) {
        this.currentValue = event.target.value = this.max
      } else if (event.target.value < this.min) {
        this.currentValue = event.target.value = this.min
      } else {
        this.currentValue = event.target.value - 0
      }
    },
    showNumberPanel(event) {
      if(this.$attrs['parent-page'] && this.$attrs['parent-page'].numberPanel){
        this.$attrs['parent-page'].numberPanel.show(event, (value) => {
          let val = 0
          if (value !== -1) {
            val = this.currentValue + '' + value
            if (this.max !== undefined && val - 0 < this.max) {
              this.currentValue = val
            } else if (this.max !== undefined) {
              this.currentValue = this.max
            } else {
              this.currentValue = val
            }
          } else {
            val = this.currentValue.toString()
            if (val.length > 1) {
              this.currentValue = val.substring(0, val.length - 1)
            } else {
              this.currentValue = this.min
            }
          }
          this.currentValue = this.currentValue - 0
        })
      }
    },
    changeVal(val) {
      val = Number(val)
      this.$emit('input', this.currentValue)
      this.$emit('on-change', this.currentValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.number-input {
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 1px;

  .reduce-icon {
    width: 30px;
    color: #555;
    text-align: center;
    border-right: 1px solid #ddd;
    float: left;
    font-size: 30px;
    height: 28px;
    line-height: 25px;
  }

  .input {
    height: 28px;
    line-height: 28px;
    width: calc(100% - 65px);
    border: none;
    text-align: center;
    font-size: 14px;
    color: #646464;
    float: left;
  }

  .plus-icon {
    color: #555;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-left: 1px solid #ddd;
    float: left;
    width: 29px;
    font-size: 25px;
  }

  .reduce-icon.disabled,
  .plus-icon.disabled {
    color: #bbb;
    background: #f5f5f5;
  }
}
</style>
